<template>
  <div class="handling-feedback">
    <!-- 处理进展 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-operation"></i>
        <span>处理进展反馈</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>处理状态</label>
          <el-select v-model="formData.status" placeholder="请选择处理状态" style="width: 100%">
            <el-option label="初步处置" value="初步处置"></el-option>
            <el-option label="持续处理中" value="持续处理中"></el-option>
            <el-option label="基本控制" value="基本控制"></el-option>
            <el-option label="完全控制" value="完全控制"></el-option>
            <el-option label="后续观察" value="后续观察"></el-option>
          </el-select>
        </div>

        <div class="form-item">
          <label>更新时间</label>
          <el-date-picker
            v-model="formData.updateTime"
            type="datetime"
            placeholder="选择更新时间"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>

        <div class="form-item">
          <label>处理进展描述</label>
          <el-input 
            v-model="formData.progressDescription" 
            type="textarea"
            :rows="4"
            placeholder="请详细描述当前处理进展情况"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 已实施措施 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-check"></i>
        <span>已实施措施</span>
      </div>
      <div class="form-content">
        <div class="measure-list">
          <div 
            v-for="(measure, index) in implementedMeasures" 
            :key="index"
            class="measure-item"
          >
            <div class="measure-header">
              <span class="measure-number">{{ index + 1 }}</span>
              <el-button 
                type="text" 
                icon="el-icon-delete"
                @click="removeMeasure(index)"
                class="delete-btn"
              ></el-button>
            </div>
            <el-input 
              v-model="measure.content" 
              type="textarea"
              :rows="2"
              placeholder="请输入已实施的具体措施"
              maxlength="300"
            ></el-input>
            <div class="measure-meta">
              <el-input 
                v-model="measure.executor" 
                placeholder="执行人"
                size="small"
                style="width: 48%;"
              ></el-input>
              <el-date-picker
                v-model="measure.executeTime"
                type="date"
                placeholder="执行时间"
                size="small"
                style="width: 48%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
        </div>
        
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="addMeasure"
          plain
          style="width: 100%; margin-top: 10px;"
        >
          添加措施
        </el-button>
      </div>
    </div>

    <!-- 资源调配 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-goods"></i>
        <span>资源调配情况</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>医疗资源</label>
          <el-input 
            v-model="formData.medicalResources" 
            type="textarea"
            :rows="3"
            placeholder="请记录医疗设备、药品等资源的调配情况"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>物资保障</label>
          <el-input 
            v-model="formData.materialSupport" 
            type="textarea"
            :rows="3"
            placeholder="请记录防护物资、生活物资等保障情况"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>人员部署</label>
          <el-input 
            v-model="formData.personnelDeployment" 
            type="textarea"
            :rows="3"
            placeholder="请记录专业人员、志愿者等人员部署情况"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 存在问题 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-warning-outline"></i>
        <span>存在问题及建议</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>当前存在问题</label>
          <el-input 
            v-model="formData.currentIssues" 
            type="textarea"
            :rows="3"
            placeholder="请记录处理过程中遇到的困难和问题"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>

        <div class="form-item">
          <label>改进建议</label>
          <el-input 
            v-model="formData.suggestions" 
            type="textarea"
            :rows="3"
            placeholder="请提出改进建议和后续工作重点"
            maxlength="500"
            show-word-limit
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        type="default" 
        size="large"
        @click="handleReset"
        style="flex: 1;"
      >
        重置
      </el-button>
      <el-button 
        type="primary" 
        size="large"
        @click="handleSubmit"
        style="flex: 2;"
      >
        提交反馈
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveHandlingFeedback } from './service';

export default {
  name: 'HandlingFeedback',
  
  data() {
    return {
      formData: {
        status: '',
        updateTime: '',
        progressDescription: '',
        medicalResources: '',
        materialSupport: '',
        personnelDeployment: '',
        currentIssues: '',
        suggestions: ''
      },
      implementedMeasures: [
        { content: '', executor: '', executeTime: '' }
      ]
    };
  },

  methods: {
    addMeasure() {
      this.implementedMeasures.push({
        content: '',
        executor: '',
        executeTime: ''
      });
    },

    removeMeasure(index) {
      if (this.implementedMeasures.length === 1) {
        this.$message.warning('至少保留一条措施记录');
        return;
      }
      this.implementedMeasures.splice(index, 1);
    },

    handleSubmit() {
      if (!this.formData.status) {
        this.$message.warning('请选择处理状态');
        return;
      }
      if (!this.formData.progressDescription) {
        this.$message.warning('请输入处理进展描述');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '提交中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const data = {
        ...this.formData,
        implementedMeasures: this.implementedMeasures.filter(m => m.content)
      };

      saveHandlingFeedback(data)
        .then(() => {
          loading.close();
          this.$notify({
            title: '✅ 提交成功',
            message: '处理情况反馈已提交',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
          this.handleReset();
        })
        .catch(error => {
          loading.close();
          this.$message.error(error.message || '提交失败');
        });
    },

    handleReset() {
      this.formData = {
        status: '',
        updateTime: '',
        progressDescription: '',
        medicalResources: '',
        materialSupport: '',
        personnelDeployment: '',
        currentIssues: '',
        suggestions: ''
      };
      this.implementedMeasures = [
        { content: '', executor: '', executeTime: '' }
      ];
      this.$message.info('表单已重置');
    }
  }
};
</script>

<style scoped>
.handling-feedback {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.form-content {
  padding: 15px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-item label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 措施列表 */
.measure-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.measure-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #409EFF;
}

.measure-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.measure-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #409EFF;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.delete-btn {
  color: #F56C6C;
  font-size: 16px;
}

.measure-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}
</style>

